共计 2112 个字符，预计需要花费 6 分钟才能阅读完成。
template 标签
是 HTML5 中引入的一种新标签，用于定义可复制的模板。它允许在文档中定义一段包含 HTML 结构的模板，但不会在页面加载时显示其内容，加载后通过使用 JavaScript 来显示它。
实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.title {
margin-bottom: 10px;
font-size: 30px;
color: #333;
text-align: center;
}
.row {
background-color: #fff;
display: flex;
justify-content: center;
}
.col {
border: 1px solid #f0f0f0;
width: 15%;
height: 35px;
text-align: center;
line-height: 35px;
}
.bold .col {background-color: #f1f1f1;}
</style>
</head>
<body>
<div>
<div class="title"> 学生列表 </div>
<div class="thead">
<div class="row bold">
<div class="col"> 编号 </div>
<div class="col"> 姓名 </div>
<div class="col"> 列表 </div>
</div>
</div>
<div class="tbody"></div>
</div>
<template id="tp">
<div class="row">
<div class="col">xxx</div>
<div class="col">xxx</div>
<div class="col">xxx</div>
</div>
</template>
<script>
let arr = [{ id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 19},
{id: 3, name: '王五', age: 20},
]
const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age} of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
</script>
</body>
</html>同步写法
新建 students.json 文件：
[{ "id": 1, "name": "张三", "age": 18},
{"id": 2, "name": "李四", "age": 19},
{"id": 3, "name": "王五", "age": 20}
]相应的 JS 代码修改为：
async function getStudents() {
try {
// 获取响应对象，返回 Promise
const res = await fetch('students.json')
// 获取响应体
const arr = await res.json()
const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age} of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
} catch (e) {console.log(e)
}
}
getStudents()异步写法
相应的 JS 代码修改为：
fetch('students.json')
.then((res) => res.json())
.then((arr) => {const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age} of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
})
.catch((e) => console.log(e))
正文完
